<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px; height: 400px"></div>
        <script>
            // 1. 引入 echarts
            // 2. 创建一个容器div
            // 3. 初始化 echarts 并选择容器
            // 4. 设置配置项 option
            // 5. 使用 setOption 方法，设置数据
            var pieDatas = [
                {
                    value: 100,
                    name: "保定占比",
                },
                {
                    value: 200,
                    name: "张家口占比",
                },
                {
                    value: 300,
                    name: "承德占比",
                },
                {
                    value: 400,
                    name: "石家庄占比",
                },
                {
                    value: 500,
                    name: "廊坊占比",
                },
                {
                    value: 600,
                    name: "唐山占比",
                },
            ];
            // 2100
            const myChart = echarts.init(document.querySelector("#main"));
            const option = {
                backgroundColor: "rgb(40,46,72)",
                title: {
                    text: "充电桩数量",
                    top: "50%",
                    left: "50%",
                    padding: [-10, 0, 0, -45],
                    textStyle: {
                        fontSize: 19,
                        color: "#fff",
                    },
                },
                legend: {
                    orient: "vertical",
                    right: "8%",
                    top: "18%",
                    itemGap: 10,
                    itemWidth: 16,
                    itemHeight: 16,
                    icon: "rect",
                    textStyle: {
                        fontSize: 12,
                        color: "#fff",
                    },
                    formatter: function (name) {
                        var currentData = pieDatas.find(
                            (item) => item.name === name
                        );

                        return (
                            name +
                            " " +
                            ((currentData.value / 2100) * 100).toFixed(2) +
                            "%"
                        );
                    },
                },
                series: {
                    type: "pie",
                    center: ["50%", "50%"],
                    // 内径和外径
                    radius: ["30%", "70%"],
                    label: {
                        show: false,
                    },
                    data: pieDatas,
                    roseType: "area",
                },
            };
            myChart.setOption(option);
        </script>
    </body>
</html>
